<script setup>
import router from '@/router/index.js';
import { useRoute } from 'vue-router';
import { getDetialInfos } from '@/services';
import { ref, computed } from 'vue';
import DetailSwipe from '@/views/detail/cpns/detail-01-swipe.vue';
import Detail02Infos from '@/views/detail/cpns/detail-02-infos.vue';
import Detail03Facility from '@/views/detail/cpns/detail-03-facility.vue';
import Detail04Landiord from '@/views/detail/cpns/detail-04-landiord.vue';
import Detail05Comment from '@/views/detail/cpns/detail-05-comment.vue';
import Detail06Notice from '@/views/detail/cpns/detail-06-notice.vue';
import Detail07Map from '@/views/detail/cpns/detail-07-map.vue';
import Detail08Intro from '@/views/detail/cpns/detail-08-intro.vue';
const onClickLeft = () => {
  router.back();
};
const route = useRoute();
const houseId = route.params.id;
//发送网络请求
const detailInfos = ref({});
const mainPart = computed(() => detailInfos.value?.mainPart);
getDetialInfos(houseId).then((res) => {
  detailInfos.value = res.data;
});
</script>

<template>
  <div class="detail top-page">
    <van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />
    <div class="main" v-if="mainPart">
      <detail-swipe :swipe-part="mainPart.topModule.housePicture.housePics" />
      <detail02-infos name="描述" :ref="getSectionRef" :top-infos="mainPart.topModule" />
      <detail03-facility :house-facility="mainPart.dynamicModule.facilityModule.houseFacility" />
      <detail04-landiord name="房东" :landlord="mainPart.dynamicModule.landlordModule" />
      <detail05-comment :comment="mainPart.dynamicModule.commentModule" />
      <detail06-notice name="须知" :order-rules="mainPart.dynamicModule.rulesModule.orderRules" />
      <detail07-map :ref="getSectionRef" :position="mainPart.dynamicModule.positionModule" />
      <detail08-intro :price-intro="mainPart.introductionModule" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>
